<template>
  <div class="background-container">
    <div class="main-box">
      <div class="left-link-container">
        <div>01</div>
        <div><router-link to="#">历史数据查询</router-link></div>
      </div>
      <div class="right-link-container">
        <div>02</div>
        <div>
          <router-link to="/data-entry/">2024新系统</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TransferPage",
  created() {
    this.$api
      .getUser()
      .then((response) => {
        if (response.data.code == 906) {
          // return  alert('token已过期')
          this.$router.push(`/login`);
        }

        console.log("数据", response.data.data);
        // this.getData(response.data.data.areacode);
      })
      .catch((error) => {
        // 处理错误
        console.error(error);
      });
  }
};
</script>

<style scoped>
.background-container {
  position: relative; /* 设置相对定位，以便在其内部绝对定位链接容器 */
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  background-image: url("../../assets/TransferPage/06-开始页-背景.png"); /* 设置大背景图片 */
  background-size: cover; /* 将大背景图片扩展至整个容器 */
  background-position: center; /* 将大背景图片居中 */
  color: white; /* 设置文本颜色为白色，以便更好地显示在大背景图上 */
}
.main-box {
  width: 60%;
  text-align: center;
  /* height: 100%; */
  margin: 0 auto;

  display: flex;

  justify-content: space-between;
}
.left-link-container,
.right-link-container {
  /* position: absolute; */
  padding: 0 5px;
  font-weight: bold;
  background-size: 100% auto; /* 将小背景图片水平铺满容器，垂直保持原始比例 */
  background-repeat: no-repeat;
  color: #000;
  width: 300px; /* 调整容器的宽度 */
  height: 100px; /* 调整容器的高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-link-container {
  float: left;
  top: 50%; /* 调整左边链接容器的垂直位置 */
  left: 28%; /* 调整左边链接容器的水平位置 */
  background-image: url("../../assets/TransferPage/07-开始页-标题框.png"); /* 设置左边小背景图片 */
}
.left-link-container div:nth-child(1) {
  width: 76px;
  height: 96px;
  line-height: 90px;
  font-size: 24px;
}
.left-link-container div:nth-child(2) {
  width: 224px;
  line-height: 90px;
  height: 96px;
  font-size: 24px;
  color: #000;
}
.right-link-container div:nth-child(1) {
  width: 76px;
  height: 96px;
  line-height: 90px;
  font-size: 24px;
}
.right-link-container div:nth-child(2) {
  width: 224px;
  line-height: 90px;
  height: 96px;
  font-size: 24px;
  color: #000;
}
.right-link-container {
  float: right;
  top: 50%; /* 调整右边链接容器的垂直位置 */
  right: 28%; /* 调整右边链接容器的水平位置 */
  background-image: url("../../assets/TransferPage/07-开始页-标题框.png"); /* 设置右边小背景图片 */
}

.transfer-page a {
  text-decoration: none;
}

.left-link,
.right-link {
  /* padding: 10px 20px; */
  border-radius: 5px; /* 添加圆角 */
  font-size: 24px; /* 增加文字的大小 */
  font-weight: bold;
  color: black;
  position: relative;
  line-height: 1.5;
}

.left-link span,
.right-link span {
  color: gray;
  font-size: 33px;
  position: absolute; /* 设置绝对定位 */
}

.left-link span {
  top: -40%;
  left: -72px; /* 调整左边文字的位置 */
}

.right-link span {
  top: -40%;
  left: -80px; /* 调整右边文字的位置 */
}
</style>
